<template>
	<view class="wrap">
		<view class="nav_wrap">
			<view class="relative z-index-999" :style="{
				height:statusbarHeight
			}">

			</view>

			<view class="flex items-center justify-between relative z-index-999 nav-content" style="z-index: 9999;">
				<view class="text-333 text-44 font-500 nav-title">
					智聊
				</view>
				<view class="flex items-center">
					<view class="relative image-48">
						<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/index-icon_tianjia@2x.png"
							class="image-48 addBtn" mode="" @click="isAdd = !isAdd"></image>

						<view class="add-popup-content flex flex-col justify-between" v-if="isAdd">
							<view class="flex items-center justify-between" v-for="(item,index) in addList"
								:key="item.name" @click="handleAddClick(item.name)">
								<image :src="item.url" class="image-48" mode=""></image>
								<view class="text-28 text-FFF text-nowrap" style="width: 112rpx;">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<div class="nav-select flex items-center justify-between mt-32">
				<div class="flex flex-col items-center" @click="$tab.nav(`/pages/chat2/groupList`)">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_wodequnliao@2x.png"
						class="image-88" mode=""></image>
					<div class="font-500 mt-16">
						我的群聊
					</div>
				</div>
				<div class="flex flex-col items-center" @click="$tab.nav('/pages/chat2/addressBook')">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_haoyouliebiao@2x.png"
						class="image-88" mode=""></image>
					<div class="font-500 mt-16">
						好友列表
					</div>
				</div>
				<div class="flex flex-col items-center" @click="$tab.nav('/pages/mine/setting/userModify')">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/appImages5/icon_gerenmingpian@2x.png"
						class="image-88" mode=""></image>
					<div class="font-500 mt-16">
						个人名片
					</div>
				</div>
			</div>

		</view>

		<view class="" :style="{
			height:navWrapHeihght+'px'
		}">

		</view>

		<view class="relative">
			<scroll-view scroll-y :style="{
				height:screenHeight - navWrapHeihght - 50 + 'px'
			}">
				<view class="" v-for="(item,index) in chatList" :key="item.groupId" :style="{
					background:item.isTop ? '#F8F8F8' : '#FFF'
				}">
					<view class="flex items-center px-20 py-28" @click="handleGoPage(item)">
						<view class="relative">
							<view class="noReadMsgNum" v-if="item.noReadMsgNum && item.noReadMsgNum != 0">
								{{item.noReadMsgNum}}
							</view>
							<image :src="item.groupAvatar" class="round-12" style="width: 94rpx;height: 94rpx;" mode="">
							</image>
						</view>
						<view class="flex items-center relative justify-between ml-24" style="width: 598rpx;">
							<view class="flex flex-col items-end justify-between pt-8"
								style="width: 390rpx;height: 94rpx;">
								<view class="text-36 text-161A0C u-line-1 w-full ">
									{{item.groupName}}
								</view>
								<view class="rich-text" style="width: 100%;height: 40rpx;overflow: hidden;"
									v-if="item.msgContentType == 'text' || item.msgContentType == 'atText'">
									<rich-text :nodes="item.lastMsg"
										style="color: #A2A2A2;font-size: 28rpx;"></rich-text>
								</view>
								<view class="rich-text" style="width: 100%;height: 40rpx;overflow: hidden;"
									v-if="item.msgContentType == 'jielong'">
									<rich-text :nodes="item.lastMsg"
										style="color: #A2A2A2;font-size: 28rpx;"></rich-text>
								</view>
								<view class="last-mag text-28" v-if="item.msgContentType == 'img'">
									[图片]
								</view>
								<view class="last-mag text-28" v-if="item.msgContentType == 'video'">
									[视频]
								</view>
								<view class="last-mag text-28" v-if="item.msgContentType == 'voice'">
									[语音消息]
								</view>
								<view class="last-mag text-28" v-if="item.msgContentType == 'red_packet'">
									[红包]
								</view>
								<view class="last-mag text-28" v-if="item.msgContentType == 'file'">
									[文件]
								</view>
							</view>
							<view class="flex flex-col items-end justify-between" style="height: 96rpx;">
								<view class="mt-8 text-D1D1D1 text-24">
									{{ item.time }}
								</view>
							</view>
							<view class="list-line">

							</view>
						</view>

					</view>
				</view>
			</scroll-view>
		</view>


		<!-- 右上角 + 弹窗 -->
		<view class="add-popup" v-if="isAdd">
			<view class="add-popup-mask" @click="isAdd = false">

			</view>
		</view>

		<!-- #ifdef APP -->
		<!-- s APP版本更新 -->
		<update ref="myUpdataModel"></update>
		<!-- E APP版本更新-->
		<!-- #endif -->


		<u-modal :show="permissionShow" title="权限说明" content='富乐万家对照片/摄像头权限申请说明:便于您使用该功能在扫一扫场景中读取内容' confirmText="允许"
			cancelText="禁止" @confirm="handleAddClick('扫一扫',true)" @cancel="permissionShow = false"
			:showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	// #ifdef APP
	import update from '@/components/update/update'
	// #endif
	// #ifdef MP-WEIXIN
	let interstitialAd = null
	// #endif

	import qly from "@/qly"

	import {
		getToken
	} from "@/utils/auth"

	export default {
		// #ifdef APP
		components: {
			update
		},
		// #endif
		data() {
			return {
				isAdd: false,
				addList: [{
						url: "http://api.fceos.cn/qiliaoyun/profile/appImages/icon_chuangjianqunliao@2x.png",
						name: "创建群聊"
					},
					{
						url: "http://api.fceos.cn/qiliaoyun/profile/appImages/icon_tianjiapengyou@2x.png",
						name: "添加朋友"
					},
					{
						url: "http://api.fceos.cn/qiliaoyun/profile/appImages/icon_saoyisao@2x.png",
						name: "扫一扫"
					},
				],
				navWrapHeihght: null,
				scroll: 0,
				statusbarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				screenHeight: uni.getSystemInfoSync().screenHeight,
				permissionShow: false,
			}
		},
		computed: {
			chatList() {
				return qly.chatList
			},
			networkStatus() {
				return qly.networkStatus
			},
			noReadNum() {
				return qly.noReadNum
			}
		},
		watch: {
			networkStatus(newNet, oldNet) {
				if (newNet && !oldNet) {
					qly.chatListFun.getList()
				}
			},
		},
		async onLoad(e) {
			if (uni.getStorageSync('service')) {
				e = uni.getStorageSync('service')
				uni.removeStorageSync('service')
			}
		},
		onShow() {
			if (this.noReadNum > 0) {
				uni.setTabBarBadge({
					index: 1,
					text: data.noReadMsgNum > 99 ? '...' : String(data.noReadMsgNum),
					color: '#F40' // 小红点的颜色
				});
			} else {
				uni.removeTabBarBadge({
					index: 1,
					complete: (res) => {
						console.log(res, 'res')
					}
				});
			}
		},
		onReady() {
			let view = uni.createSelectorQuery().in(this).select(".nav_wrap");
			view.fields({
				size: true,
				scrollOffset: true
			}, data => {
				this.navWrapHeihght = data.height
			}).exec();
		},
		onPageScroll(e) {
			this.scroll = e.scrollTop
		},
		onHide() {
			this.isAdd = false
		},
		methods: {
			handleGoPage(item) {
				this.$tab.nav(
					`/pages/chat2/chatIndex?groupId=${item.groupId}&title=${item.isGroup == 1 ? item.groupName + '(' + item.chatUserNum + ')' : item.groupName}&isGroup=${item.isGroup}&id=${item.isGroup == 1 ? '' : item.otherUserId }`
				)
			},
			handleAddClick(name, flag) {
				switch (name) {
					case '添加朋友':
						this.$tab.nav(`/pages/chat2/searchFriend`)
						break
					case '创建群聊':
						this.$tab.nav(`/pages/chat2/createGroupChat`)
						break
					case '扫一扫':
						if (!flag) {
							if (plus.os.name == 'Android' && plus.navigator.checkPermission(
									'android.permission.READ_EXTERNAL_STORAGE') === 'undetermined' || plus.navigator
								.checkPermission('android.permission.CAMERA') === 'undetermined') {
								this.permissionShow = true
								return
							}
						}
						this.permissionShow = false
						uni.scanCode({
							scanType: ['qrCode'],
							success: (qrRes) => {
								this.$tab.nav(
									`/pages/chat2/addFriend?userName=${qrRes.result}`
								)
							}
						})
						break
				}
				this.isAdd = false
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
		height: 100%;
	}

	.nav-select {
		padding: 0 64rpx 32rpx 64rpx;
	}

	.wrap {
		height: 100%;
	}

	.nav_wrap {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;

	}

	.add-popup {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;

		.add-popup-mask {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
		}
	}

	.nav-content {
		padding: 24rpx 32rpx;
	}

	.add-popup-content {
		width: 280rpx;
		height: 326rpx;
		background: url('http://api.fceos.cn/qiliaoyun/profile/appImages/indx-add-bg.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: -28rpx;
		top: 54rpx;
		z-index: 9999;
		padding: 54rpx 46rpx 40rpx 46rpx;
	}

	.last-mag {
		width: 100%;
		height: 54rpx;
		overflow: hidden;
		line-height: 64rpx;
		color: #A2A2A2;
	}

	.noReadMsgNum {
		width: 36rpx;
		height: 36rpx;
		background: #FF2C2C;
		position: absolute;
		right: -18rpx;
		top: -18rpx;
		border-radius: 50%;
		font-size: 20rpx;
		color: #FFF;
		line-height: 36rpx;
		text-align: center;
		z-index: 1;
	}

	.list-line {
		position: absolute;
		left: 0;
		bottom: -28rpx;
		z-index: 1;
		width: 100%;
		height: 2rpx;
		background-color: #F3F3F3;
	}
</style>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
	.nav-content {
		padding: 0 32rpx;
		height: 44px;
	}

	.nav-title {
		position: absolute;
		left: 24%;
		top: 12%;
		z-index: 9;
	}

	.add-popup-content {
		background: url('http://api.fceos.cn/qiliaoyun/profile/appImages/indx-add-bg-weixin.png') no-repeat;
		background-size: 100% 100%;
		right: -202rpx;
	}


	/* #endif */
</style>